<template>
	<view class="tpf-cart-list">
		<view class="tpf-cart-item" v-for="(item,index) of cartGoodsList" :key="'seller-'+index">
			<view class="tpf-cart-seller flex flex-align-center">
				<view class="seller-name">{{item.name}}</view>
			</view>
			<view class="tpf-cart-goods flex flex-align-center" v-for="(good,goodsIndex) of item.goods" :key="'goods-'+goodsIndex">
				<view class="tpf-cart-goods-thumb"><img class="tpf-cart-goods-thumb-img" :src="good.goods_thumb" alt=""></view>
				<view class="tpf-cart-goods-info flex-1">
					<view class="tpf-cart-goods-name">{{good.goods_name}}</view>
					<view class="tpf-cart-goods-sprc">{{good.spec_key_name}}</view>
					<view class="tpf-cart-goods-price-quantity flex flex-align-center flex-pack-justify">
						<view class="price"><tpl-price :price="good.goods_price"></tpl-price></view>
						<view class="tpf-goods-number">
							<uni-number-box :min="1" :max="good.stock" :value="good.number" @change="changeNumber" :originalData="{seller_id:item.id,cart_id:good.id}"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-align-center tpf-settlement-ext" v-for="(ext,extIndex) of item.ext" :key="'ext-'+extIndex" @tap="showPop(ext,item.id)">
				<view class="label">{{ext.title}}</view>
				<view class="ext-info flex-1" v-for="(child,childIndex) of ext.list" v-if="child.selected" :key="'child'+child.id">{{child.name}}</view>
				<tpf-icon :textStyle="extConfig.textStyle" :fontFamily="extConfig.fontFamily" :text="extConfig.right.text"></tpf-icon>
			</view>
			<view class="flex tpf-settlement-ext">
				<view class="label">订单备注</view>
				<view class="ext-info flex-1">
					<textarea placeholder-style="color:#a2a2a2;" @input="extSettlementInput" :data-index="index" style="height: 100rpx;" placeholder="订单备注" maxlength="100"/>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="extSettlement" type="bottom">
			<view class="pop-wrap activity-and-discount-activity">
				<view class="pop-title">{{extData.title}}</view>
				<view class="pop-item">
					<view class="pop-mtit">{{extData.title}}</view>
					<view class="item flex flex-align-center" v-for="(item, index) of extData.list" :key="index" @tap="selectExt(extData.id,index)">
						<view class="desc flex-1">{{item.name}}</view>
						<tpf-icon v-if="extData.list.length>0 && item.selected" :fontFamily="extConfig.selectedIcon.fontFamily" :text="extConfig.selectedIcon.text"></tpf-icon>
					</view>
				</view>
				<view class="pop-sure-btn" @tap="closePop">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import config from './tpl-settlement.js';
export default{
	name:"TplSettlement",
	mixins:[config],
	props:{
		cartGoodsList:{
			type:Array
		}
	},
	data(){
		return {
			extData:[]
		}
	},
	methods:{
		selectExt(key,index){
			this.cartGoodsList.forEach((seller,sellerIndex)=>{
				seller.id === this.current_seller_id && seller.ext.forEach((extItem,extIndex)=>{
					extItem.id == key && extItem.list.forEach((child,childIndex)=>{
						this.cartGoodsList[sellerIndex].ext[extIndex].list[childIndex].selected = childIndex == index ? true:false;
					});
				});
			});
		},
		showPop(obj,seller_id){
			this.current_seller_id = seller_id;
			this.extData = obj;
			this.extData.id && this.$refs.extSettlement.open();
		},
		closePop(){
			this.$refs.extSettlement.close();
		},
		changeNumber(e){
			this.$emit("changeNumber",e);
		},
		extSettlementInput(e){
			this.cartGoodsList[e.currentTarget.dataset.index].user_note=e.detail.value;
		}
	}
}
</script>

<style lang="scss">
.tpf-goods-number{
	transform: scale(0.8);
}
.tpf-cart-item{
	font-size: $uni-font-size-base;
	color: #333333;
	background-color:$uni-bg-color-white;
	padding: 20rpx;
	margin: 20rpx 0;
}
.tpf-cart-goods{margin: 20rpx 0;}
.tpf-cart-goods-thumb{
	width: 200rpx;
	height: 200rpx;
	overflow: hidden;
}
.tpf-cart-goods-thumb-img{
	max-width: 100%;
}
.tpf-cart-goods-info{
	padding-left: 18rpx;
}
.tpf-cart-goods-name{
	font-size: $uni-font-size-sm;
	height: $uni-font-size-sm*2.5;
	overflow: hidden;
	word-break: break-all;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}
.tpf-cart-goods-sprc{
	font-size: $uni-font-size-sm;
	color: #9e9e9e;
	padding: 18rpx 0;
}
.tpf-cart-goods-price-quantity .price{
	color:$uni-text-color-red;
}
.tpf-cart-goods-price-quantity .money{
	font-size: $uni-font-size-sm*1.36;
}
.pop-wrap{
	background-color: $uni-bg-color-white;
	padding: $uni-padding-size-sm;
}
.pop-title{
	text-align: center;
	font-size: $uni-font-size-mi*1.6;
}
.pop-mtit{
	font-size:$uni-font-size-base*1.1;
	border-left-width:3px;
	border-left-style: solid;
	border-left-color:$uni-text-color-red; 
	padding-left:10rpx;
	line-height: 100%;
	margin:28rpx 0;
}
.pop-item{
	font-size: $uni-font-size-sm;
	min-height: 480rpx;
}
.pop-item .item{
	margin-top: 18rpx;
}
.pop-item .label{
	background-color: $uni-bg-color-pink;
	padding:0 10rpx;
	height:40rpx;
	line-height: 40rpx;
	color:$uni-text-color-white;
	border-radius: $uni-border-radius-sm;
	white-space: nowrap;
}
.pop-sure-btn{
	background-color: #fe0036;
	color: #FFF;
	text-align: center;
	font-size:$uni-font-size-sm*1.36;
	padding: 16rpx 0;
}
.tpf-settlement-ext{
	font-size: $uni-font-size-sm;
	margin: 20rpx 0;
}
.tpf-settlement-ext .label{
	white-space: nowrap;
}
.tpf-settlement-ext .ext-info{
	color:#a0a0a0;
	padding: 0 20rpx;
}
</style>
